<template>
  <div class="list">
    <el-button
      size="small"
      type="warning"
      plain
      @click="jump"
      icon="el-icon-edit"
      >上报</el-button
    >
    <div class="table">
      <el-table
        :data="tableData"
        size="mini"
        style="%100"
        highlight-current-row="true"
        align="center"
        border
        max-height="500"
        :header-cell-style="{
          background: '#ffa500',
          color: '#606266',
        }"
      >
        <el-table-column
          fixed="left"
          prop="id"
          label="序号"
          align="center"
          width="145"
        >
        </el-table-column>
        <el-table-column prop="country" label="国籍" align="center" width="150">
        </el-table-column>
        <el-table-column prop="province" label="省" align="center" width="150">
        </el-table-column>
        <el-table-column prop="city" label="市" align="center" width="150">
        </el-table-column>
        <el-table-column prop="area" label="区" align="center" width="150">
        </el-table-column>
        <el-table-column label="新增确诊" align="center" width="150">
          <template slot-scope="scope">
            <el-tag size="mini" effect="light">{{
              scope.row.confirmed
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="疑似" align="center" width="150">
          <template slot-scope="scope">
            <el-tag size="mini" type="warning">{{
              scope.row.suspected
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="死亡" align="center" width="100">
          <template slot-scope="scope">
            <!-- scope:插槽作用域对象 仅能在当前template内使用 -->

            <el-tag size="mini" type="info">{{ scope.row.dead }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="治愈" align="center" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" type="success">{{ scope.row.cure }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="重症" align="center" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" type="danger">{{ scope.row.severe }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="境外输入" align="center" width="100">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.outside }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="上报时间" align="center" width="150">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              moment(scope.row.inputTime).format("YYYY-MM-DD HH:mm")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="toEdit(scope.row)"
              type="primary"
              plain="true"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain="true"
              @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="title" :visible.sync="visible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="form.country"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-input v-model="form.province"></el-input>
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="form.city"></el-input>
        </el-form-item>
        <el-form-item label="区">
          <el-input v-model="form.area"></el-input>
        </el-form-item>

        <el-form-item label="确诊">
          <el-input v-model="form.confirmed"></el-input>
        </el-form-item>
        <el-form-item label="疑似">
          <el-input v-model="form.suspected"></el-input>
        </el-form-item>
        <el-form-item label="死亡">
          <el-input v-model="form.dead"></el-input>
        </el-form-item>
        <el-form-item label="治愈">
          <el-input v-model="form.cure"></el-input>
        </el-form-item>
        <el-form-item label="重症">
          <el-input v-model="form.severe"></el-input>
        </el-form-item>
        <el-form-item label="境外输入">
          <el-input v-model="form.outside"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="toCancel">取 消</el-button>
        <el-button type="primary" @click="toSave('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../../utils/request";
let moment = require("moment");

export default {
  data() {
    return {
      title: "",
      form: {},
      visible: false,
      inputTime: [],
      tableData: [],
      pageParam: {
        page: 1,
        pageSize: 50,
      },
    };
  },
  computed: {},
  methods: {
    moment,
    toCancel() {
      this.$refs["form"].resetFields();
      this.visible = false;
    },
    toSave(form) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          axios.post("/epidemic/saveOrUpdate", this.form).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: "成功",
                message: "这是一条成功的提示消息",
                type: "success",
              });
              this.pageQuery();
              this.visible = false;
            } else {
              this.$notify.error({
                title: "失败",
                message: "保存失败",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    toDelete(id) {
      this.$confirm("此操作将永久删除该用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // await等待后面异步函数运行完毕，拿到响应的数据，然后返回
          let res = await axios.get("/epidemic/deleteById", { params: { id } });
          this.$notify({
            title: res.status == 200 ? "删除成功" : "删除失败",
            message: res.statusText,
            type: res.status == 200 ? "success" : "error",
          });
          this.pageQuery();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toEdit(row) {
      this.title = "编辑用户信息";
      this.form = {
        ...row,
      };
      this.visible = true;
    },
    submitForm() {},
    async pageQuery() {
      // 接口路径 配置对象
      let res = await axios.get("/epidemic/pageQuery", {
        params: this.pageParam,
      });
      this.tableData = res.data.list;
      this.tableData.reverse();
      this.inputTime = res.list.inputTime;
    },
    jump() {
      this.$router.push({ path: "/up" });
    },
  },
  created() {
    this.pageQuery();
  },
  mounted() {},
};
</script>
<style scoped>
.id {
  color: orange;
}
.table {
  margin-top: 10px;
}
</style>